﻿<!DOCTYPE html>
<html lang="en">
<nav th:replace="shop/include::shopHeader"></nav>

<body class="shopping_cart_page">
   <nav th:replace="shop/include::shopTop"></nav>
  
  <!-- Main Container -->
  <section class="main-container col1-layout">
    <div class="main container">
      <div class="col-main" >
        <div class="cart" th:each="order:${orderList}">
          <div class="page-content page-order"><div class="page-title">
            <h4 style="display:inline;" th:text="${ '订单号：' + order.orderNo}"></h4>
            <span style="color:red;float:right;" th:if="${order.payStatus } == 0" 
            th:text="${'订单过期时间：' + #dates.format(order.expirationTime, 'yyyy-MM-dd HH:mm:ss')}"
            ></span>
          </div>
            <div class="order-detail-content">
              <div class="table-responsive">
                <table class="table table-bordered cart_summary">
                  <thead>
                    <tr>
                      <th class="cart_product">商品图片</th>
                      <th>商品名称/简介</th>
                      <th>单价</th>
                      <th>抵扣商品积分</th>
                      <th>抵扣后实付</th>
                      <th>数量</th>
                      <th>单件合计</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="od:${order.orderDetails}">
                      <td class="cart_product">
                      	<a th:href="${ '/shop/detail/' +od.goodsId}">
                      		<img th:src="${'/files/' + od.thumbnailImage}" alt="Product">
                      	</a>
                      </td>
                      <td class="cart_description" style="max-width:200px;">
                      	<p class="product-name" th:text="${od.goodsName}"></p>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(od.salePrice * 0.01, 1, 2) }"></span></td>
                      <td class="price">
                      	<span th:text="${'￥'+ #numbers.formatDecimal(od.couponAmount * 0.01, 1, 2) }"></span>
                      </td>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(od.totalPrice * 0.01, 1, 2)  }"></span></td>
                      <td class="qty" style="width:130px;">
                      	<div class="numbers-row">
	                      <input class="qty"  maxlength="12" name="qty" title="Qty" type="text" th:value="${od.goodsNumber}" disabled="disabled">
                    	    </div>
                      </td>
                      <td class="price"><span th:text="${'￥'+ #numbers.formatDecimal(od.realPrice  * 0.01, 1, 2)  }"></span></td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="3" rowspan="3" style="font-size:14px;" th:text="${ '收货地址:' + order.address + ' '+ order.receiver + ' '+ order.mobile}">
	                      收货地址：
                      </td>
                      <td colspan="3">商品总金额</td>
                      <td colspan="2"><strong id="goodsPriceTotal" th:text="${'￥'+ #numbers.formatDecimal(order.orderPayee * 0.01, 1, 2)  }"></strong> </td>
                    </tr>
                    <tr>
                      <td colspan="3">抵扣积分总金额</td>
                      <td colspan="2"><strong id="shopCreditTotal" th:text="${'￥'+ #numbers.formatDecimal(order.couponAmount * 0.01, 1, 2)  }"></strong></td>
                    </tr>
                    <tr>
                      <td colspan="3"><strong>实付金额</strong></td>
                      <td colspan="2"><strong id="realPayTotal" th:text="${'￥'+ #numbers.formatDecimal(order.totalPayee * 0.01, 1, 2)  }">$237.88 </strong></td>
                    </tr>
                    <tr th:if="${order.orderStatus } == 0">
                      <td colspan="3"><strong>选择支付方式</strong></td>
                      <td colspan="5" style="text-align:right;">
                      	<label><img src="/shop/images/alypay_icon.jpg"/><input type="radio" checked="checked"  value="1" th:name="${'payType_'+order.id}"/></label>&nbsp;
                      	<label><img src="/shop/images/wx_pay_icon.jpeg"/><input type="radio"  value="2" th:name="${'payType_'+order.id}"/></label>&nbsp;
                      	<label>现金积分支付<input type="radio" value="3" name="payType" th:name="${'payType_'+order.id}"/></label>
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="cart_navigation" th:if="${order.orderStatus } == 0"> 
              	<a  class="checkout-btn" href="javascript:void(0);" th:onclick="'javascript:pay('+${order.id}+');'"><i class="fa fa-check"></i>去支付</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
   <!-- Footer -->
  <nav th:replace="shop/include::shopFooter"></nav>
<!-- End Footer --> 
<!-- JS --> 
<!-- jquery js --> 
<script type="text/javascript" src="/shop/js/jquery.min.js"></script> 
<!-- bootstrap js --> 
<script type="text/javascript" src="/shop/js/bootstrap.min.js"></script> 
<!-- owl.carousel.min js --> 
<script type="text/javascript" src="/shop/js/owl.carousel.min.js"></script> 
<!-- bxslider js --> 
<script type="text/javascript" src="/shop/js/jquery.bxslider.js"></script> 
<!-- megamenu js --> 
<script type="text/javascript" src="/shop/js/megamenu.js"></script> 
<script type="text/javascript">
  /* <![CDATA[ */   
  var mega_menu = '0';
  /* ]]> */
</script> 
<!-- jquery.mobile-menu js --> 
<script type="text/javascript" src="/shop/js/mobile-menu.js"></script>
<!--jquery-ui.min js --> 
<script type="text/javascript" src="/shop/js/jquery-ui.js"></script> 
<!-- main js --> 
<script type="text/javascript" src="/shop/js/main.js"></script> 
<script type="text/javascript" src="/js/plugins/layer/layer.js"></script>
<script type="text/javascript">

function loadShoppingCartNum(){
	$.ajax({
		type : "GET",
		url : "/shop/shopping_cart/total_number",
		sync:false,
		data : {},// 你的formid
		contentType:"application/json",
        dataType : "json",
		success : function(r) {
			if (r.code == 0) {
				$("#shoppingCartNum").html("共"+r.msg+"件商品");
			} else {
				layer.msg(r.msg);
			}
		}
	});
}
loadShoppingCartNum();

function pay(id){
	var payType = $("input[name=payType_"+id+"]:checked").val();
	if(payType == 1){
		alipayPay(id)
	}else if(payType == 2){
		wxPay(id);
	}else if(payType == 3){
		jifenPay(id);
	}
}

function alipayPay(orderId){
	window.location.href="/shop/order/pay/alipay?id="+orderId;
}

function wxPay(orderId){
	window.location.href="/shop/order/pay/wx?id="+orderId;
}

function jifenPay(orderId){
	window.location.href="/shop/order/pay/jifen?id="+orderId;
}

</script>
 
</body>
</html>
